<template>
  <div class="homePage">
    <div class="header">
      <div style="width: 100%;display: flex;justify-content: space-between;">
        <h3>
          HIIC科技信息智能检索
        </h3> 
        <el-input
          style="width:260px;"
          placeholder="输入关键并按enter键进行检索"
          suffix-icon="el-icon-search"
          v-model="search"
          size="small"
          @keyup.enter.native="handleSearch"
        >
        </el-input>
      </div>
    </div>
    <h3 style="text-align:center;padding: 70px 0 20px;">集成电路产业链海内外华人高端人才分布</h3>
    <div class="homeBody">
      <div style="margin-bottom: 16px;">
        <span>产业链环节</span>
        <el-radio-group v-model="industryChain" size="mini" style="margin-left: 10px;">
          <el-radio-button v-for="(item, index) in industryChainList" :key="index" :label="item.value">
            {{item.name}}
          </el-radio-button>
        </el-radio-group>
      </div>
      <!-- <div id="myChart" style="height: 500px;width: 500px;"></div> -->
      <el-row :gutter="20">
        <el-col :span="4">
            <p style="line-height: 32px;">人才分布概况</p>
            <ul class="distributionOf">
              <li>
                <span>人才总量</span>
                <span>2013</span>
              </li>
              <li style="display: flex;justify-content: space-between;">
                <span>分布国家和地区数</span>
                <span>12</span>
              </li>
              <li style="display: flex;justify-content: space-between;">
                <span>分布公司数</span>
                <span>1123</span>
              </li>
              <li style="display: flex;justify-content: space-between;">
                <span>覆盖技术方向数</span>
                <span>56</span>
              </li>
            </ul>
            <p style="line-height: 32px;margin-top: 8px;">人才毕业院校分布统计</p>
            <div id="graduateSchool" style="width: 100%; height: 200px;"></div>
            <p style="line-height: 32px;margin-top: 8px;">人才所在国家（地区）分布统计</p>
            <div id="talentArea" style="width: 100%; height: 200px;"></div>
        </el-col>
        <el-col :span="16">
          <div id="worldMap" style="width: 100%;height: 480px;"></div>
          <span style="line-height: 32px;">人才年龄分布统计</span>
          <div id="talentAge" style="width: 100%; height: 200px;"></div>
        </el-col>
        <el-col :span="4">
          <div>
            <p style="line-height: 32px;">技术方向人才统计</p>
            <div id="technicalPersonnel" style="width: 100%; height: 200px;"></div>
            <p style="line-height: 32px;margin-top: 8px;">人才产业链分布统计</p>
            <div id="talentIndustryChain" style="width: 100%; height: 200px;"></div>
            <p style="line-height: 32px;margin-top: 8px;">人才公司分布统计</p>
            <div id="talentCompany" style="width: 100%; height: 200px;"></div>
          </div>
        </el-col>
      </el-row>

    </div>
  </div>
</template>

<script>
import map from './map';

export default {
  name: 'HomePage',
  data() {
    return {
      search: '',
      industryChain: '1',
      industryChainList: [
        { name: '全部', value: '1'},
        { name: '设计', value: '2'},
        { name: '电子器件封装', value: '3'},
        { name: '测试', value: '4'},
        { name: '拆料', value: '5'},
        { name: '设备', value: '6'},
        { name: '半导体应用', value: '7'},
        { name: '半导体制造', value: '8'},
        { name: '元器件', value: '9'},
        { name: 'IP', value: '10'},
        { name: 'EDA', value: '22'},
      ],
      geoCoordMap: {
        '芬兰': [24.909912, 60.169095], 
        '美国': [-100.696295, 33.679979], 
        '日本': [139.710164, 35.706962], 
        '韩国': [126.979208, 37.53875], 
        '瑞士': [7.445147, 46.956241],
        '东南亚': [117.53244, 5.300343], 
        '澳大利亚': [135.193845, -25.304039], 
        '德国': [13.402393, 52.518569], 
        '英国': [-0.126608, 51.208425], 
        '加拿大': [-102.646409, 59.994255],
        '利比亚': [13.07, 32.49],
        '俄罗斯': [37.35, 55.45],
      },
      data: [
          {name:"加拿大",value:199},
          {name:"利比亚",value:42},
          {name:"俄罗斯",value:102},
      ],
      mapName: 'world',
    };
  },
  created() {
    this.$echarts.registerMap('world', map);
  },
  mounted(){
    this.worldMap();
    this.graduateSchool();
    this.talentArea();
    this.talentAge();
    this.technicalPersonnel();
    this.talentIndustryChain();
    this.talentCompany();
  },
  methods: {
    handleSearch() {
      console.log('搜索', this.search);
      this.$router.push({
        name: 'SearchPage',
        params: {
          value: this.search
        }
      })
    },
    convertData(data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
            var geoCoord = this.geoCoordMap[data[i].name];
            if (geoCoord) {
                res.push({
                    name: data[i].name,
                    value: geoCoord.concat(data[i].value),
                });
            }
        }
        return res;
    },
    // drawLine(){
    //   // 基于准备好的dom，初始化echarts实例
    //   let myChart = this.$echarts.init(document.getElementById('myChart'))
    //   // 绘制图表
    //   myChart.setOption({
    //     title: { text: '在Vue中使用echarts' },
    //     tooltip: {},
    //     xAxis: {
    //         data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
    //     },
    //     yAxis: {},
    //     series: [{
    //         name: '销量',
    //         type: 'bar',
    //         data: [5, 20, 36, 10, 10, 20]
    //     }]
    //   })
    // },
    worldMap() {
      const myChart = this.$echarts.init(document.getElementById('worldMap'));
      const option = {
          backgroundColor:"#000",
          tooltip: {
              padding: 0,
              enterable: true,
              transitionDuration: 1,
              textStyle: {
                  color: '#000',
                  decoration: 'none',
              },
          },

          visualMap: {
              show: false,
              min: 0,
              max: 200,
              left: '10%',
              top: 'bottom',
              calculable: true,
              seriesIndex: [1],
              inRange: {
                  color: ['#04387b', '#467bc0'] // 蓝绿
              }
          },
          geo: {
              show: true,
              map: this.mapName,
              label: {
                  normal: {
                      show: false
                  },
                  emphasis: {
                      show: false,
                  }
              },
              roam: true,
              itemStyle: {
                  normal: {
                      areaColor: '#323c48',
                      borderColor: '#1180c7',
                  },
                  emphasis: {
                      areaColor: '#4499d0',
                  }
              }
          },
          series: [{
              name: '散点',
              type: 'scatter',
              coordinateSystem: 'geo',
              data: this.convertData(this.data),
              // symbolSize: function(val) {
              //     return val[2] / 10;
              // },
              symbolSize:10,
              label: {
                  normal: {
                      formatter: '{b}',
                      position: 'right',
                      show: false
                  },
                  emphasis: {
                      show: true
                  }
              },
              itemStyle: {
                  normal: {
                      color: '#fff'
                  }
              }
          },
              {
                  name: '点',
                  type: 'scatter',
                  coordinateSystem: 'geo',
                  zlevel: 6,
              },
              {
                  name: 'Top 5',
                  type: 'effectScatter',
                  coordinateSystem: 'geo',
                  data: this.convertData(this.data.sort(function(a, b) {
                      return b.value - a.value;
                  }).slice(0, 10)),
                  // symbolSize: function(val) {
                  //     return val[2] / 10;
                  // },
                  symbolSize:10,
                  showEffectOn: 'render',
                  rippleEffect: {
                      brushType: 'stroke'
                  },
                  hoverAnimation: true,
                  label: {
                      normal: {
                          formatter: '{b}',
                          position: 'left',
                          show: false
                      }
                  },
                  itemStyle: {
                      normal: {
                          color: 'yellow',
                          shadowBlur: 10,
                          shadowColor: 'yellow'
                      }
                  },
                  zlevel: 1
              },

          ]
      };
      myChart.setOption(option);
    },
    graduateSchool() {
      const myChart = this.$echarts.init(document.getElementById('graduateSchool'));
      const option = {
          grid: {
            left: '3%',
            right: '3%',
            bottom: '3%',
            top: '2%',
            containLabel: true,
          },
          xAxis: {
              show: false,
              inverse:true
          },
          yAxis: {
              axisLine: {
                  show: false,
                  lineStyle: {
                    color: "#515151",
                  }
              },
              axisTick: {
                  show: false,  
              },
              position: 'right',
              type: 'category',
              data: ['中正大学','浙江大学', '香港科技大学','美国南加州大学','上海交通大学','成功大学','中央大学','清华大学', '交通大学', '台湾大学' ]
          },
          series: [
              {
                  name: '2011年',
                  type: 'bar',
                  data: [8899,9604,8990,9788,10002,13744,14970,29034,30100,30230],
                  itemStyle: {
                    normal: {
                      color: '#1e9493'
                    }
                  },
                  label: {
                    color: '#fff'
                  }
              },
          ]
      };
      myChart.setOption(option);
    },
    talentArea() {
      const myChart = this.$echarts.init(document.getElementById('talentArea'));
      const option = {
          tooltip: {
              trigger: 'item',
              formatter: '{a} <br/>{b} : {c} ({d}%)'
          },
          legend: {
              type: 'scroll',
              orient: 'vertical',
              icon:'circle',
              right: 10,
              top: 20,
              bottom: 20,
              textStyle: {
                color: 'rgb(179, 179, 179)',
              }
          },
          series: [
              {
                  name: '地区',
                  type: 'pie',
                  radius: ['40%', '70%'],
                  itemStyle: {
                      borderColor: '#000',
                      borderWidth: 2,
                  },
                  center: ['30%', '50%'],
                  data: [
                    {value: 1048, name: '搜索引擎'},
                    {value: 735, name: '直接访问'},
                    {value: 580, name: '邮件营销'},
                    {value: 484, name: '联盟广告'},
                    {value: 300, name: '视频广告'},
                    {value: 580, name: 'afhoif'},
                    {value: 484, name: 'dsfaufas'},
                    {value: 300, name: 'adsfas'},
                    {value: 580, name: 'sadfsdf'},
                    {value: 484, name: 'sdf'},
                    {value: 300, name: 'sdggg'},
                    {value: 580, name: 'aaaaa'},
                    {value: 484, name: 'gggg'},
                    {value: 300, name: '34'},
                  ],
                  labelLine: {
                      show: false
                  },
                  label: {
                      show: false,
                      // position: 'center'
                  },
                  emphasis: {
                      itemStyle: {
                          shadowBlur: 10,
                          shadowOffsetX: 0,
                          shadowColor: 'rgba(0, 0, 0, 0.5)'
                      }
                  },
              }
          ],
          color: ['#5470c6', '#91cc75', '#fac858', '#ee6666', '#73c0de', '#3ba272', '#fc8452', '#9a60b4', '#ea7ccc']
      };
      myChart.setOption(option);
    },
    talentAge() {
      const myChart = this.$echarts.init(document.getElementById('talentAge'));
      const option = {
          grid: {
              top:"2%",
              left:"3%",
              right:"3%",
              bottom:"10%"
          },
          xAxis: {
              type: 'category',
              data: ['1944','1945','1946','1947','1948','1949','1950', '1953', '1955', '1957', '1959', '1960','1962','1967','1969','1971','1974','1976','1978','1981','1983','1985','1988','1990','1992','1994','1996','1998','2000',],
              boundaryGap: false,
              axisTick: {
                  show: false,
              },
              axisLabel: {
                textStyle: {
                  color: 'rgb(179, 179, 179)'
                }
              },
          },
          yAxis: {
              type: 'value',
              show: false
          },
          series: [{
              data: [10, 20, 30, 100, 123, 149, 170,180, 190, 180,300, 100,400, 500, 432, 600,580, 700, 630, 800, 900, 821, 1023, 944,1148,1023,500,539,123],
              type: 'line',
              smooth: true,
              areaStyle: {
                  color: '#3c125d',
              },
              color: '#50167c',
              showSymbol: false,
          }]
      };
      myChart.setOption(option);
    },
    technicalPersonnel() {
      const myChart = this.$echarts.init(document.getElementById('technicalPersonnel'));
      const option = {
          grid: {
            left: '3%',
            right: '3%',
            bottom: '3%',
            top: '2%',
            containLabel: true,
          },
          xAxis: {
              show: false,
              inverse:false,
          },
          yAxis: {
              axisLine: {
                  show: false,
                  lineStyle: {
                    color: "#515151",
                  }
              },
              axisTick: {
                  show: false,  
              },
              position: 'left',
              type: 'category',
              data: ['Firmware','ASIC', 'BEDDED Software','C++','Wireless','SoC','Semicoductors','C', 'Debugging', 'bededed Systems' ]
          },
          series: [
              {
                  name: '2011年',
                  type: 'bar',
                  data: [8899,9604,8990,9788,10002,13744,14970,29034,30100,30230],
                  itemStyle: {
                    normal: {
                      color: '#6dc8ec'
                    }
                  },
                  label: {
                    color: '#fff'
                  }
              },
          ]
      };
      myChart.setOption(option);
    },
    talentIndustryChain() {
      const myChart = this.$echarts.init(document.getElementById('talentIndustryChain'));
      const option = {
        series: [
            {
                name: '访问来源',
                type: 'pie',
                radius: '55%',
                center: ['50%', '50%'],
                data: [
                  {value: 400, name: 'asfddsfsd'},
                  {value: 335, name: 'dafasdafasdfasd'},
                  {value: 300, name: 'dafasdafasdfasd'},
                  {value: 280, name: 'asdfasf'},
                  {value: 250, name: 'asdfasdf'},
                  {value: 220, name: 'asdfasdfa'},
                  {value: 190, name: 'asdfasdfa'},
                  {value: 150, name: 'asdfasdfa'},
                  {value: 100, name: 'asdfasdfa'},
                  {value: 50, name: 'asdfasdfa'},
                ],
                roseType: 'radius',
                label: {
                    color: 'rgba(255, 255, 255, 0.3)'
                },
                labelLine: {
                    lineStyle: {
                        color: 'rgba(255, 255, 255, 0.3)'
                    },
                    smooth: 0.2,
                    length: 10,
                    length2: 20
                },
                itemStyle: {
                    color: '#c23531',
                    shadowBlur: 200,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                },
            }
        ]
      };
      myChart.setOption(option);
    },
    talentCompany() {
      const myChart = this.$echarts.init(document.getElementById('talentCompany'));
      const option = {
          grid: {
            left: '3%',
            right: '3%',
            bottom: '3%',
            top: '2%',
            containLabel: true,
          },
          yAxis: {
              show: false,
              inverse:false,
          },
          xAxis: {
              axisLine: {
                  show: false,
                  lineStyle: {
                    color: "#515151",
                  }
              },
              axisTick: {
                  show: false,  
              },
              axisLabel: {
                fontSize: '0.05rem',
                interval: 0, // 设置斜切
                rotate: 40 // 设置斜切
              },
              position: 'left',
              type: 'category',
              data: ['Firmware','ASIC', 'BEDDED Software','C++','Wireless','SoC','Semicoductors','C', 'Debugging', 'bededed Systems' ]
          },
          series: [
              {
                  name: '2011年',
                  type: 'bar',
                  data: [8899,9604,8990,9788,10002,13744,14970,29034,30100,30230],
                  itemStyle: {
                    normal: {
                      color: '#6dc8ec'
                    }
                  },
                  label: {
                    color: '#fff'
                  }
              },
          ]
      };
      myChart.setOption(option);
    }
  }
}
</script>

<style lang="less">
.homePage {
  height: 100%;
  background-color: #000;
  color: #fff;
  .header {
    // justify-content:space-evenly;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 0 16px;
    height: 50px;
    line-height: 50px;
    background-color: #020324;
    z-index: 9999;
  }
  .homeBody {
    padding: 0 16px;
    font-size: 14px;
    color: rgb(179, 179, 179);
  }
  .el-radio-button .el-radio-button__inner {
    border: none;
    background-color: #000;
    color: #fff;
    padding: 7px 10px;
    &:hover {
      color: #1890ff
    }
  }
  .el-radio-button__orig-radio:checked+.el-radio-button__inner {
    color: #FFF;
    background-color: #409EFF;
    border-color: #409EFF;
    box-shadow: -1px 0 0 0 #409eff;
    border-radius: 4px;
    padding: 7px 10px;
  }
  .distributionOf {
    width: 100%; 
    height: 200px;
    li {
      display: flex;
      justify-content: space-between;
      line-height: 50px;
    }
  }
}
</style>